<template>
    <div :class="[{ 'pub-bg': bgcolor }, 'pub-title', 'flexs']" :style="{ padding: padding }">
        <div class="pub-title__left">
            <span class="pub-title__left-title">{{ title }}</span>
            <slot name="sub"></slot>
        </div>
        <div class="pub-title__right" @click="onClick" v-if="showRight">
            <span>{{ value }}</span>
            <el-icon color="#999" size="14px"><ArrowRight /></el-icon>
        </div>
        <slot name="right" v-else></slot>
    </div>
</template>

<script setup>
import { ArrowRight } from "@element-plus/icons-vue"
/**
 * @property {String} title  标题
 * @property {String} padding  容器内间距
 * @property {String} value  右侧文本内容
 * @property {Boolean} showRight  是否显示右侧
 * @property {Boolean} bgcolor  是否有背景
 */
const props = defineProps({
    padding: {
        type: String,
        default: "0px 0px 30px",
    },
    title: {
        type: String,
        default: "",
    },
    value: {
        type: String,
        default: "更多",
    },
    showRight: {
        type: Boolean,
        default: false,
    },
    bgcolor: {
        type: Boolean,
        default: false,
    },
})

const emits = defineEmits(["click"])
const onClick = () => {
    emits("click")
}
</script>

<style lang="less" scoped>
.pub-title {
    width: 100%;
    overflow: hidden;
}

.pub-title__left {
    flex: 1;
    overflow: hidden;
    font-size: @font-size-lg;
    color: @gray-8;
    font-weight: bold;
    position: relative;
    padding-left: @padding-sm;
    display: flex;
    align-items: center;
}

.pub-title__left-title {
    margin-right: @margin-xs;
}

.pub-title__left::before {
    position: absolute;
    top: 4px;
    left: 0;
    width: 3px;
    height: 14px;
    background-color: @themes;
    content: "";
    overflow: hidden;
}

.pub-title__right {
    flex: none;
    font-size: @font-size-md;
    color: @gray-6;
    display: flex;
    align-items: baseline;
    margin-left: @margin-mdl;
    overflow: hidden;
}

.pub-title__right span {
    margin-right: 6px;
}

.pub-bg {
    background-color: @gray-1;
    padding: @padding-xs @padding-sm !important;
    margin-bottom: @margin-base * 7;
}
</style>
